<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>交通运输仿真</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style>
        html, body, #container, #container1 {
            width: 100%;
            height: 100%;
        }
        #costList {
            position: absolute;
            top: 50px;
            left: 10px;
            background-color: white;
            padding: 10px;
            border: 1px solid #ccc;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            max-width: none;
            white-space: nowrap;
            font-family: Arial, sans-serif;
            font-size: 14px;
            line-height: 1.5;
            color: #333;
            border-radius: 4px;
            height: 200px;
            overflow-y: auto;
        }
        #buttonContainer, #buttonContainer1 {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 1000;
        }
        .sidebar {
            height: auto;
            width: auto;
            background-color: white;
            position: fixed;
            top: 0;
            left: -200px; /* 初始位置隐藏在左侧 */
            transition: left 0.3s; /* 平滑过渡 */
            background-color: rgba(255, 255, 255, 0); /* 设置半透明背景 */

        }
        .sidebar.visible {
            left: 0; /* 显示时的位置 */
        }

        .toggle-button{

            display: block; /* 每个按钮占一整行 */
            width: 50px; /* 按钮宽度 */
            height: 50px; /* 按钮高度 */
            margin: 10px auto; /* 上下间距，居中对齐 */
            border: none; /* 去掉默认边框 */
            border-radius: 10px; /* 圆角设计 */
            font-size: 30px; /* 字体大小 */
            color: white; /* 字体颜色 */
            cursor: pointer; /* 鼠标悬停时显示手指图标 */
            transition: background-color 0.3s, transform 0.1s; /* 添加过渡效果 */
            background-color: #72cfff;
        }

        .button {

            display: block; /* 每个按钮占一整行 */
            width: 200px; /* 按钮宽度 */
            height: 50px; /* 按钮高度 */
            margin: 10px auto; /* 上下间距，居中对齐 */
            border: none; /* 去掉默认边框 */
            border-radius: 10px; /* 圆角设计 */
            font-size: 16px; /* 字体大小 */
            color: white; /* 字体颜色 */
            cursor: pointer; /* 鼠标悬停时显示手指图标 */
            transition: background-color 0.3s, transform 0.1s; /* 添加过渡效果 */
            background-color: #72cfff;
            opacity: 0.8;
        }

        .button:hover {
            filter: brightness(1.1); /* 悬停时亮度增加 */
        }
        .button:active {
            transform: scale(0.95); /* 点击时稍微缩小 */
        }
        .close-btn{
            display: block; /* 每个按钮占一整行 */
            width: 200px; /* 按钮宽度 */
            height: 50px; /* 按钮高度 */
            margin: 10px auto; /* 上下间距，居中对齐 */
            border: none; /* 去掉默认边框 */
            border-radius: 10px; /* 圆角设计 */
            font-size: 25px; /* 字体大小 */
            color: white; /* 字体颜色 */
            cursor: pointer; /* 鼠标悬停时显示手指图标 */
            transition: background-color 0.3s, transform 0.1s; /* 添加过渡效果 */
            background-color: #72cfff;
            opacity: 0.8;
        }

    </style>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: "e94047d1e89f095ee6288e1becc3a7bc",
        };
    </script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=b20705c6a46bc7f5ced44a059b172a8c&plugin=AMap.Driving,AMap.MoveAnimation"></script>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.0/sockjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
</head>
<body>
<div id="container">
    <div id="buttonContainer">
        <button class="toggle-button" id="openbutton" onclick="toggleSidebar()">☰</button>
    </div>
</div>
<div  id="container1">
    <div class="sidebar" id="sidebar">
        <button class="close-btn" id="closeSidebar">☰</button>
        <button class="button" onclick="createDemand()">生成需求并开始运行</button>
        <button class="button" onclick="showMarkers()">恢复地图</button>
        <button class="button" onclick="clearPolylines()">清除折线</button>
        <button class="button" onclick="displayCost()">展示代价等相关数据</button>
    </div>
</div>

<div id="panel"></div>
<script src="mapInitializer.js"></script>

<script>
    // 控制侧边栏的显示和隐藏
    function toggleSidebar() {
        const sidebar = document.getElementById('sidebar');
        sidebar.classList.toggle('visible');
        let openbutton = document.getElementById('buttonContainer');
        openbutton.style.display = 'none'; // 隐藏切换按钮

    }

    document.getElementById('closeSidebar').onclick = function() {
        const sidebar = document.getElementById('sidebar');
        sidebar.classList.remove('visible');

        document.getElementById('buttonContainer').style.display = 'block'; // 显示切换按钮
    };
</script>
<script src="createDemand.js"></script>
</body>
</html>